<template>
  <div class="index">
    <heads title="发布信息" :LeftArrow="true"></heads>
    <div class="main-content">
      <!-- 回收类别 -->
      <div class="item item-classify">
        <van-cell
          title="发布类型"
          required
          is-link
          @click="showTypePicker = true"
          :value="formData.sendType"
        />
        <van-cell
          title="类目"
          required
          is-link
          @click="showPicker = true"
          :value="formData.type"
        />
        <van-field
            readonly
            clickable
            required
            name="color"
            :value="formData.color.colour"
            label="颜色"
            placeholder="请选择"
            @click="showColor = true"
            is-link
          />
        <template v-if="type === '1'">
          <van-field
            v-model="formData.name"
            name="细分品名"
            required
            label="细分品名"
            placeholder="填写品名更容易被搜索"
            :rules="[{ required: true, message: '请填写细分品名' }]"
          />
          <van-field
            readonly
            clickable
            required
            name="country"
            :value="formData.country"
            label="国家"
            placeholder="请选择"
            @click="showCountry = true"
            is-link
          />
          <van-field
            readonly
            clickable
            required
            name="area"
            :value="formData.region"
            :disabled="areaList[0].values.length > 0 ? false : true"
            label="产地"
            placeholder="请选择"
            @click="areaList[0].values.length > 0 ? (showArea = true) : ''"
            is-link
          />

          <van-field
            readonly
            clickable
            required
            name="datetimePicker"
            v-model="formData.endTime"
            label="交易截止日期"
            placeholder="请选择交易截止日期"
            @click="showTime = true"
            is-link
            label-width="7.5em"
          />
          <van-field
            v-model="formData.len"
            name="长度"
            required
            label="长度"
            type="digit"
            placeholder="填写长度"
            :rules="[{ required: true, message: '请填写长度' }]"
          >
            <template #extra>
              <span class="unit">毫米</span>
            </template>
          </van-field>
          <van-field
            v-model="formData.fineness"
            name="细度"
            required
            label="细度"
            type="digit"
            placeholder="填写细度"
            :rules="[{ required: true, message: '请填写细度' }]"
          >
            <template #extra>
              <span class="unit">毫米</span>
            </template>
          </van-field>
          <van-field
            v-model="formData.downContent"
            name="含绒率"
            required
            label="含绒率"
            type="digit"
            placeholder="填写含绒率"
            :rules="[{ required: true, message: '请填写含绒率' }]"
          >
            <template #extra>
              <span class="unit">%</span>
            </template>
          </van-field>

          <van-field
            v-model="formData.stock"
            name="数量"
            required
            label="数量"
            type="number"
            placeholder="填写数量"
            :rules="[{ required: true, message: '请填写数量' }]"
          >
            <template #extra>
              <span class="unit">吨</span>
            </template>
          </van-field>
          <van-field
            v-model="formData.price"
            name="价格"
            required
            label="价格"
            type="digit"
            placeholder="填写价格"
            :rules="[{ required: true, message: '请填写价格' }]"
          >
            <template #extra>
              <span class="unit">元</span>
            </template>
          </van-field>
        </template>
      </div>
      <!-- end -->


        <!-- 发布内容 -->
      <div class="item item-note">
        <div class="item-top item-note-top item-top-e">
          <h1><span class="van-cell--required"></span>发布内容</h1>
        </div>
        <div class="item-note-bottom">
          <van-field
            v-model="formData.issueContent"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入"
            show-word-limit
          />
        </div>
      </div>
      <!-- end -->
            <!-- 回收类别 -->
      <div class="item item-note" v-if="type === '1'">
        <div class="item-top item-note-top item-top-e flex space-between">
          <h1><span class="van-cell--required"></span>文件上传</h1>
          <span>最多上传{{ maxCount }}张</span>
        </div>
        <div class="item-note-bottom">
          <van-uploader
            v-model="formData.fileList"
            :after-read="uploadForehead"
            preview-size="1.9rem"
            :max-count="maxCount"
            :disabled="formData.fileList >= maxCount ? true : false"
            upload-icon="photograph"
          />
        </div>
      </div>
      <!-- end -->

      <!-- 说明/服务信息 -->
      <div class="item item-note">
        <div class="item-top item-note-top">
          <h1>{{ type === "1" ? "说明" : "服务信息" }}</h1>
        </div>
        <div class="item-note-bottom">
          <van-field
            v-model="formData.note"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入"
            show-word-limit
          />
        </div>
      </div>
      <!-- end -->

      <div class="btn-box">
        <van-button
          type="info"
          round
          class="btn-common"
          loading-text="发布中..."
          :loading="sendLoading"
          @click="send"
        >
          发布
        </van-button>
      </div>
           <!-- 类目弹框 -->
      <van-popup v-model="showColor" round position="bottom">
        <van-picker
          show-toolbar
          title="颜色"
          :columns="colorList"
          ref="colorPicker"
          :loading="loading"
          @cancel="showColor = false"
          @confirm="colorChange"
          
        />
      </van-popup>
      <!-- end -->
      <!-- 发布类型弹框 -->
      <van-popup v-model="showTypePicker" round position="bottom">
        <van-picker
          show-toolbar
          title="发布类型"
          :columns="sendTypeList"
          @cancel="showTypePicker = false"
          @confirm="sendTypeChange"
        />
      </van-popup>
      <!-- end -->
      <!-- 类目弹框 -->
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          title="类目"
          :columns="typeList"
          ref="typePicker"
          :loading="loading"
          @cancel="showPicker = false"
          @confirm="typeChange"
          @change="typeSelect"
        />
      </van-popup>
      <!-- end -->
      <!-- 国家弹框 -->
      <van-popup v-model="showCountry" round position="bottom">
        <van-picker
          show-toolbar
          :columns="countryList"
          ref="countryPicker"
          title="国家"
          :loading="countryLoading"
          @confirm="countryChange"
          @cancel="showCountry = false"
        />
      </van-popup>
      <!-- end -->
      <!-- 省市区弹框 -->
      <van-popup v-model="showArea" round position="bottom">
        <van-picker
          show-toolbar
          :columns="areaList"
          ref="areaPicker"
          title="地区"
          :loading="areaLoading"
          @confirm="regionChange"
          @cancel="showArea = false"
          @change="areaSelect"
        />
      </van-popup>
      <!-- end -->
      <!-- 交易截止日期弹框 -->

      <van-popup v-model="showTime" round position="bottom">
        <van-datetime-picker
         v-model="endTime"
          type="date"
          title="交易截止日期"
          :max-date="maxDate"
          @confirm="endTimeChange"
          @cancel="showTime = false"
        />
      </van-popup>
      <!-- end -->
    </div>
    <foots :active="2"></foots>
  </div>
</template>

<script>
import adressList from "@/js/json/area.js";
import * as Config from "@/js/common/config";

import { mapState } from "vuex";
import { Toast, DatetimePicker } from "vant";
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
    foots: resolve => require(["@/components/common/foots"], resolve)
  },
  data() {
    return {
      sendLoading: false,
      areaList: adressList, // 数据格式见 Area 组件文档
      sendTypeList: Config.getSendTypeList().text,
      type: "1",
      showArea: false,
      showPicker: false,
      showColor:false,
      showTypePicker: false,
      showCountry: false, // 国家弹框
      showTime: false,
      parentValue: "", // 一级类目id
      parentIndex: 0, // 一级类目选中索引
      childValue: "", // 二级类目id
      childIndex: "", // 二级类目选中索引
      childValueT: "", // 三级类目id
      childIndexT: "", // 三级类目选中索引
      loading: false,
      countryValue: "", // 国家id
      countryIndex: "", // 国家选中索引
      provinceValue: "", // 省份id
      provinceIndex: "", // 省份选中索引
      cityValue: "", // 城市id
      cityIndex: "", // 城市选中索引
      areaValue: "", // 城市id
      areaIndex: "", // 城市选中索引
      areaLoading: false,
      countryLoading: false,
      maxCount: 9,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(new Date().getFullYear() + 2, 11, 31),
      endTime: new Date(),

      typeList: [
        // 类目
        // 第一列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        },
        // 第二列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        },
        // 第三列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        }
      ],

      areaList: [
        // 地区
        // 第一列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        },
        // 第二列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        },
        // 第三列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        }
      ],
      countryList: [
        // 国家
        // 第一列
        {
          values: [],
          ids: [],
          defaultIndex: 0
        }
      ],
      // 颜色列表
      colorList:[
        {
           values: [],
          ids: [],
          defaultIndex: 0
        }
      ],
      formData: {
        name: "", //细分品名
        country: "", // 国家
        region: "", // 产地
        len: "", // 长度
        fineness: "", // 细度
        downContent:'',// 含绒率
        stock: "", // 数量
        price: "", // 价格
        fileList: [],
        fileIds: [], // 图片集合
        type: "请选择类目",
        sendType: "请选择发布类型",
        sendTypeId: "", // 发布类型id
        areaCode: "",
        endTime:  '', // 交易截止日期
        note:'',// 说明
        issueContent:'',// 发布内容
        color:'',// 颜色id
      }
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  watch: {
    // 类目一级分类改变时
    parentValue: {
      handler(newVal, oldVal) {
        this.getChildData({ parentId: newVal });
      }
    },
    // 类目一级索引改变时
    parentIndex: {
      handler(newVal, oldVal) {
        this.parentValue = this.typeList[0].ids[newVal];
      }
    },
    // 二级分类改变时
    childValue: {
      handler(newVal, oldVal) {
        this.getChildTData({ parentId: newVal });
      }
    },
    // 二级索引改变时
    childIndex: {
      handler(newVal, oldVal) {
        this.childValue = this.typeList[1].ids[newVal];
      }
    },

    // 三级索引改变时
    childIndexT: {
      handler(newVal, oldVal) {
        this.childValueT = this.typeList[2].ids[newVal];
      }
    },

    // 国家改变时
    countryValue: {
      handler(newVal, oldVal) {
        this.getProvinceData({ parentAreaId: newVal });
      }
    },
    // 国家索引改变时
    countryIndex: {
      handler(newVal, oldVal) {
        this.countryValue = this.countryList[0].ids[newVal];
      }
    },
    // 省份改变时
    provinceValue: {
      handler(newVal, oldVal) {
        this.getCityData({ parentAreaId: newVal });
      },
      deep: true
    },
    // 省份索引改变时
    // provinceIndex:{
    //   handler(newVal,oldVal){
    //     this.areaList[1] = this.$options.data().areaList[1]
    //      this.areaList[2] = this.$options.data().areaList[2]
    //     this.provinceValue = this.areaList[0].ids[newVal]

    //   },
    // },
    // 城市改变时
    cityValue: {
      handler(newVal, oldVal) {
        this.getAreaData({ parentAreaId: newVal });
      },
      deep: true
    }
  },

  methods: {
    onRefresh() {
      // this.InitData();
    },

    // 发布类型
    sendTypeChange(e) {
      let _this = this;
      _this.formData.sendType = `${e}`;
      let _index = Config.getSendTypeList().text.indexOf(e);

      _this.formData.sendTypeId = Config.getSendTypeList().value[_index];
      _this.showTypePicker = false;
    },
    // 类目选择
    typeChange(e) {
      let _this = this;
      _this.formData.type = `${e[0]} - ${e[1]} - ${e[2]}`;
      _this.showPicker = false;
    },
    // 类目选中时
    typeSelect(e) {
      let _this = this;
      _this.parentIndex = _this.$refs.typePicker.getIndexes()[0];
      _this.childIndex = _this.$refs.typePicker.getIndexes()[1];
      _this.childIndexT = _this.$refs.typePicker.getIndexes()[2];
    },
    // 颜色选择
    colorChange(e){
       let _this = this;
       _this.showColor = false
        let _index = _this.colorList[0].values.indexOf(e[0]);
        _this.formData.color.colour = e[0]
      _this.formData.color.colourTypeId = _this.colorList[0].ids[_index];
    },
    // 地区选中时
    areaSelect(e) {
      let _this = this;

      _this.provinceIndex = _this.$refs.areaPicker.getIndexes()[0];
      _this.cityIndex = _this.$refs.areaPicker.getIndexes()[1];
      _this.areaIndex = _this.$refs.areaPicker.getIndexes()[2];

      _this.provinceValue =
        _this.areaList[0].ids[_this.$refs.areaPicker.getIndexes()[0]];
      _this.cityValue =
        _this.areaList[1].ids[_this.$refs.areaPicker.getIndexes()[1]];
      _this.areaValue =
        _this.areaList[2].ids[_this.$refs.areaPicker.getIndexes()[2]];
    },
    // 地区选择
    regionChange(e) {
      let _this = this;

      _this.formData.region = `${e[0]}-${e[1]}-${e[2]}`;
      _this.showArea = false;
      console.log(e);
    },
    // 交易截止日期
    endTimeChange(e) {
      console.log(e);
      this.formData.endTime = `${e.getFullYear()}-${
        e.getMonth() > 9 ? e.getMonth() : "0" + e.getMonth()
      }-${e.getDate() > 9 ? e.getDate() : "0" + e.getDate()}`;
      this.showTime = false;
      this.$forceUpdate();
    },
    // 国家改变
    countryChange(e) {
      let _this = this;
      _this.formData.country = `${e[0]}`;
      _this.countryIndex = _this.countryList[0].values.indexOf(e[0]);
      _this.showCountry = false;
    },
    //文件上传
    uploadForehead(file) {
      let _this = this;
      let formData = new FormData();
      formData.append("file", file.file);
      file.status = "uploading";
      file.message = "上传中...";
      this.$ajax
        .post(
          `${this.$baseUrl}/portal/picture/isssue/upload?userId=${_this.userInfo.userId}`,
          formData
        )
        .then(function(res) {
          file.status = "";
          file.message = "";
          if (res.data.code == 200) {
            // _this.formData.fileList = _this.formData.fileList.concat(res.data.data[0].pictureUrl)
            _this.formData.fileIds = _this.formData.fileIds.concat(
              res.data.data[0].pictureId
            );

          }
        })
        .catch(function(error) {
          file.status = "fail";
          file.message = "上传失败";
          console.log(error);
        });
    },
    //类目  -- 获取一级数据
    getData() {
      let _this = this;
      this.isLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal/infoTypes/getChildNodes`, {
          parentId: 0
        })
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            // 一级

            res.data.data.map((item, index) => {
              _this.typeList[0].values.push(item.name);
              _this.typeList[0].ids.push(item.infoTypeId);
            });
            _this.parentValue =
              res.data.data[_this.typeList[0].defaultIndex].infoTypeId;
          }
        })
        .catch(function(error) {
          _this.isLoading = false;

          console.log(error);
        });
    },
    //类目  -- 获取二级数据
    getChildData(_params) {
      let _this = this;
      this.loading = true;
      _this.typeList[1].values = [];
      _this.typeList[1].ids = [];
      this.$ajax
        .post(`${this.$baseUrl}/portal/infoTypes/getAllLowerInfoType`, _params)
        .then(function(res) {
          _this.loading = false;
          if (res.data.code == 200) {
            res.data.data.map((item, index) => {
              _this.typeList[1].values.push(item.name);
              _this.typeList[1].ids.push(item.infoTypeId);
            });
            _this.childValue =
              res.data.data[_this.typeList[1].defaultIndex].infoTypeId;
          }
        })
        .catch(function(error) {
          _this.loading = false;

          console.log(error);
        });
    },
    //类目  -- 获取三级数据
    getChildTData(_params) {
      let _this = this;
      this.loading = true;
      _this.typeList[2].values = [];
      _this.typeList[2].ids = [];
      this.$ajax
        .post(`${this.$baseUrl}/portal/infoTypes/getAllLowerInfoType`, _params)
        .then(function(res) {
          _this.loading = false;
          if (res.data.code == 200) {
            res.data.data.map((item, index) => {
              _this.typeList[2].values.push(item.name);
              _this.typeList[2].ids.push(item.infoTypeId);
            });
            _this.childValueT =
              res.data.data[_this.typeList[2].defaultIndex].infoTypeId;
          }
        })
        .catch(function(error) {
          _this.loading = false;

          console.log(error);
        });
    },
    // 获取颜色
    getColorData() {
      let _this = this;
      this.isLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal/colourType/getColourList`, {
          parentId: 0
        })
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            // 一级

            res.data.data.map((item, index) => {
              _this.colorList[0].values.push(item.colour);
              _this.colorList[0].ids.push(item.colourTypeId);
            });
            _this.formData.color =
              res.data.data[_this.colorList[0].defaultIndex];
          }
        })
        .catch(function(error) {
          _this.isLoading = false;

          console.log(error);
        });
    },
    // 获取国家数据
    getCountryData() {
      let _this = this;
      _this.countryLoading = true;
      this.$ajax
        .post(`${this.$baseUrl}/portal/areas/getCountryList`, {})
        .then(function(res) {
          if (res.data.code == 200) {
            _this.countryLoading = false;
            // 一级
            res.data.data.map((item, index) => {
              _this.countryList[0].values.push(item.name);
              _this.countryList[0].ids.push(item.areaId);
            });
            _this.countryValue =
              res.data.data[_this.areaList[0].defaultIndex].areaId;
          }
        })
        .catch(function(error) {
          _this.areaLoading = false;

          console.log(error);
        });
    },

    // 获取省份数据
    getProvinceData(_param) {
      let _this = this;
      _this.areaLoading = true;
      this.$ajax
        .post(`${this.$baseUrl}/portal/areas/getChildAreaList`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.areaLoading = false;
            _this.areaList[0].values = [];
            _this.areaList[0].ids = [];
            // 一级
            res.data.data.map((item, index) => {
              _this.areaList[0].values.push(item.name);
              _this.areaList[0].ids.push(item.areaId);
            });
            _this.provinceValue =
              res.data.data[_this.areaList[0].defaultIndex].areaId;
          }
        })
        .catch(function(error) {
          _this.areaLoading = false;

          console.log(error);
        });
    },
    // 获取城市数据
    getCityData(_param) {
      let _this = this;
      _this.areaLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal/areas/getChildAreaList`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.areaLoading = false;
            _this.areaList[1].values = [];
            _this.areaList[1].ids = [];
            // 一级
            res.data.data.map((item, index) => {
              _this.areaList[1].values.push(item.name);
              _this.areaList[1].ids.push(item.areaId);
            });
            _this.cityValue = res.data.data[0].areaId;
            _this.$forceUpdate();
          }
        })
        .catch(function(error) {
          _this.areaLoading = false;

          console.log(error);
        });
    },
    // 获取县城数据
    getAreaData(_param) {
      let _this = this;
      _this.areaLoading = true;

      this.$ajax
        .post(`${this.$baseUrl}/portal/areas/getChildAreaList`, _param)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.areaLoading = false;
            _this.areaList[2].values = [];
            _this.areaList[2].ids = [];
            // 一级
            res.data.data.map((item, index) => {
              _this.areaList[2].values.push(item.name);
              _this.areaList[2].ids.push(item.areaId);
            });

            _this.areaValue = res.data.data[0].areaId;
            _this.$forceUpdate();
          }
        })
        .catch(function(error) {
          _this.areaLoading = false;

          console.log(error);
        });
    },

    //发布
    send() {
      let _this = this;

      if (this.judgeData()) {
        _this.sendLoading = true;

        let params = {
          colourId: _this.formData.color.colourTypeId,
          countryOfOrigin: _this.countryValue,
          downContent: _this.formData.downContent,
          endTime: _this.formData.endTime,
          fineness: _this.formData.fineness,
          info1Id: _this.parentValue,
          info2Id: _this.childValue,
          info3Id: _this.childValueT,
          issueContent: _this.formData.issueContent,
          issueType: _this.formData.sendTypeId,
          keyword: _this.formData.name,
          length: Number(_this.formData.len),
          stock: Number(_this.formData.stock),
          unitPrice: _this.formData.price,
          pictureIds: _this.formData.fileIds.join(","),
          placeOfOrigin: _this.areaValue,
          remark: _this.formData.remark,
          userId: _this.userInfo.userId
        };
        this.$ajax
          .post(`${this.$baseUrl}/portal/issues/addIssue`, params)
          .then(function(res) {
            if (res.data.code == 200) {
              _this.sendLoading = false;
              Toast("发布成功!");
              setTimeout(() => {
                _this.$router.push({
                  path: "/sendList",
                  query: { type: "1" }
                });
              }, 2000);
            }
          })
          .catch(function(error) {
            _this.sendLoading = false;
            console.log(error);
          });
      }
    },
    judgeData() {
      if (this.formData.sendType === "请选择发布类型") {
        Toast("请选择发布类型");
        return false;
      }
      if (this.formData.type === "请选择类目") {
        Toast("请选择类目");
        return false;
      }
      if (!this.formData.name) {
        Toast("请输入细分品名");
        return false;
      }
      if (!this.formData.country) {
        Toast("请选择国家");
        return false;
      }
      if (!this.formData.region) {
        Toast("请选择产地");
        return false;
      }
      if (!this.formData.endTime) {
        Toast("请选择交易截止日期");
        return false;
      }
      if (!this.formData.len) {
        Toast("请输入长度");
        return false;
      }
      if (!this.formData.fineness) {
        Toast("请输入细度");
        return false;
      }
        if (!this.formData.downContent) {
        Toast("请输入含绒率");
        return false;
      }
      
      if (!this.formData.stock) {
        Toast("请输入数量");
        return false;
      }
      if (!this.formData.price) {
        Toast("请输入价格");
        return false;
      }
          if (!this.formData.downContent) {
        Toast("请输入含绒率");
        return false;
      }
      if (this.formData.fileList.length <= 0) {
        Toast("请上传文件");
        return false;
      }

      return true;
    }
  },
  created() {
    this.sendTypeList = Config.getSendTypeList().text;
    this.getData(); // 获取类目一级数据
    this.getCountryData(); // 获取国家
    this.getColorData()// 获取颜色
    let _date = new Date();
    // this.formData.endTime = new Date(_date.getFullYear(), _date.getMonth()+1, _date.getDate())

    // this.formData.endTime = `${_date.getFullYear()}-${
    //   _date.getMonth() + 1 > 9
    //     ? _date.getMonth() + 1
    //     : "0" + (_date.getMonth() + 1)
    // }-${_date.getDate() > 9 ? _date.getDate() : "0" + _date.getDate()}`;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.main-content {
  padding: 0 0.3rem;
  box-sizing: border-box;
  font-size: 0.32rem;
  padding-bottom: 1.3rem;
  /deep/ .van-cell__title {
    text-align: left;
    padding-left: 0.3rem;
  }
  /deep/ .van-uploader__preview {
    margin: 0 0.3rem 0.3rem 0;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
  /deep/ .van-uploader__upload {
    margin-right: 0;
  }
  .van-uploader {
    padding-top: 0.3rem;
    padding-bottom: 0.1rem;
    width: 100%;
  }
  .item {
    background: #fff;
    color: #999;
    border-radius: 0.1rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    margin-top: 0.3rem;
    &.item-classify {
      /deep/ .van-field__control {
        text-align: right;
      }
      .unit {
        padding-left: 0.2rem;
        font-size: 0.28rem;
      }
      .van-cell {
        padding-left: 0;
        padding-right: 0;
        align-items: center;
        &:not(:last-child)::after {
          left: 0;
          right: 0;
        }
      }
    }
    .van-icon {
      vertical-align: middle;
      color: #999;
    }
    .item-top {
      padding: 0.3rem 0;
      border-bottom: 1px solid #d8d8d8;
      text-align: left;
      position: relative;
      &.item-top-e {
        h1 {
          padding-left: 0.3rem;
        }
      }
      h1 {
        font-size: inherit;
      }
    }
    .item-meddle {
      // border-bottom: 1px solid #d8d8d8;
    }
    .item-bottom,
    .item-meddle {
      padding: 0.3rem 0;
    }

    &.item-note {
      .item-note-bottom {
        .van-cell {
          padding: 0.2rem 0;
        }
      }
    }
  }
  .btn-box {
    padding: 0.5rem 0.4rem;
  }
}
</style>
